<!DOCTYPE html>
<html manifest="gini.manifest">
<head>
	<title>GINI 計數機</title>
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="icon" href="calculator.ico" />
	<link rel="apple-touch-icon" href="calculator.png" />	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
	<link rel="stylesheet" href="css/green.css" />	
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.0.1.min.js"></script>
	<style>
		input { width:100px;text-align:center; }
		td { text-align:center;padding:0px 5px 0px 5px; }
	</style>
	<script type="text/javascript" charset="utf-8">

		$(document).bind('pageinit',function() {
			console.log('init');
			$('input').focus(function(){
				$(this).select();
				if ($(this).val()=='0') $(this).val('');
				$('#result').val('');
			});		
			$('input').blur(function(){
				if ($(this).val()=='') $(this).val('0');
			});		
			$('#gi0-c0').change(function(){
				recalculate('gi0');
				recalculateEntropy('gi0');	
			});
			$('#gi0-c1').change(function(){
				recalculate('gi0');
				recalculateEntropy('gi0');					
			});
			$('#gi1-c0').change(function(){
				recalculate('gi1');
				recalculateGisp();		
			});
			$('#gi1-c1').change(function(){
				recalculate('gi1');
				recalculateGisp();		
			});
			$('#gi2-c0').change(function(){
				recalculate('gi2');
				recalculateGisp();		
			});
			$('#gi2-c1').change(function(){
				recalculate('gi2');
				recalculateGisp();
			});
			$('#gi0-gini').click(function(){
				if ($(this).val() == '') return;
				showFormula('gi0');
				$.mobile.changePage('#answer');
				event.preventDefault();
			});				
			$('#gi1-gini').click(function(){
				if ($(this).val() == '') return;
				showFormula('gi1');
				$.mobile.changePage('#answer');
				event.preventDefault();
			});	
			$('#gi2-gini').click(function(){
				if ($(this).val() == '') return;
				showFormula('gi2');
				$.mobile.changePage('#answer');
				event.preventDefault();
			});	
			$('#gi-split').click(function(){
				if ($(this).val() == '') return;
				showFormulaGISP();
				$.mobile.changePage('#answer');
				event.preventDefault();
			});	
			$('#gi0-entropy').click(function(){
				if ($(this).val() == '') return;
				showFormulaEntropy('gi0');
				$.mobile.changePage('#answer');
				event.preventDefault();
			});	
		});
		
		function recalculate(gi) {
			var c0, c1, t, g;			
			c0 = parseInt($('#'+gi+'-c0').val());
			c1 = parseInt($('#'+gi+'-c1').val());
			c0 = (!isNaN(c0)?c0:0);
			c1 = (!isNaN(c1)?c1:0);
			t = c0 + c1;
			g = calculateGI(c0, c1);
			g = (!isNaN(g)?g:'');
			$('#'+gi+'-c0').val(c0);
			$('#'+gi+'-c1').val(c1);
			$('#'+gi+'-total').val(t);
			$('#'+gi+'-gini').val(g);
		}
		
		function recalculateGisp() {
			var t1, t2, g1, g2, sp;	
			t1 = parseInt($('#gi1-total').val());
			t2 = parseInt($('#gi2-total').val());
			g1 = parseFloat($('#gi1-gini').val());
			g2 = parseFloat($('#gi2-gini').val());			
			sp = calculateGISP(t1,t2,g1,g2);		
			sp = (!isNaN(sp)?sp:'');
			$('#gi-split').val(sp);
		}
		
		function recalculateEntropy(en) {
			var c0, c1, t, ep;			
			c0 = parseInt($('#'+en+'-c0').val());
			c1 = parseInt($('#'+en+'-c1').val());
			c0 = (!isNaN(c0)?c0:0);
			c1 = (!isNaN(c1)?c1:0);
			t = c0 + c1;
			ep = calculateEntropy(c0, c1);
			ep = (!isNaN(ep)?ep:'');
			$('#'+en+'-c0').val(c0);
			$('#'+en+'-c1').val(c1);
			$('#'+en+'-total').val(t);			
			$('#'+en+'-entropy').val(ep);
		}
				
		function calculateGI(c0, c1) {
			sum = c0 + c1;
			gv = 1 - Math.pow(c0/sum,2).toPrecision(3) - Math.pow(c1/sum,2).toPrecision(3);
			gv = gv.toPrecision(3);	
			return (!isNaN(gv)?gv:'');
		}
				
		function calculateGISP(t1, t2, g1, g2) {
			sum = t1 + t2;
			gisp = (t1/sum * g1) + (t2/sum * g2)
			gisp = gisp.toPrecision(3);	
			return gisp;
		}
		
		function calculateEntropy(c0, c1) {
			sum = c0 + c1;
			ep = ((-1) * (c0/sum) * (log2(c0/sum))) + ((-1) * (c1/sum) * (log2(c1/sum)));
			ep = ep.toPrecision(4);	
			return (!isNaN(ep)?ep:'');
		}
		
		function log2(e) {
			if (e==0) return 0;
			else return (Math.log(e)/Math.log(2));
		} 

		function printGI(c0, c1) {
			sum = c0 + c1;
			fm = "GINI<sub>Index</sub>" + "<BR/>" +
				" = 1 - (" + (c0/sum) +")<SUP>2</SUP>- (" + (c1/sum) + ")<SUP>2</SUP>" + "<BR/>" +
				" = 1 - (" + Math.pow(c0/sum,2).toPrecision(3) +")- (" + Math.pow(c1/sum,2).toPrecision(3) + ")" + "<BR/>"+
				" = " + calculateGI(c0, c1);
			return fm;
		}
		
		function printGISP(t1, t2, g1, g2) {
			sum = t1 + t2;
			fm = "GINI<sub>Split</sub>" + "<BR/>" +
				" = (" + t1 + "/" + sum + ")*(" + g1 + ") + (" + t2 + "/" + sum + ")*(" + g2 + ")" + "<BR/>" +
				" = (" + (t1/sum).toPrecision(3) +")*(" + g1 + ") + (" + (t2/sum).toPrecision(3) +")*(" + g2 + ")" + "<BR/>" +
				" = " + calculateGISP(t1, t2, g1, g2);
			return fm;
		}
		
		function printEntropy(c0, c1) {
			sum = c0 + c1;
			fm = "Entropy" + "<BR/>" +
				" = - (" + c0 + "/" + sum +") log<SUB>2</SUB>(" + c0 + "/" + sum +") - (" + c1 + "/" + sum +") log<SUB>2</SUB>(" + c1 + "/" + sum +") " + "<BR/>" +
				" = (" + (-1*c0/sum).toPrecision(4) +") * (" + (Math.log(c0/sum)/Math.log(2)).toPrecision(4) +") " +
				" + (" + (-1*c1/sum).toPrecision(4) +") * (" + (Math.log(c1/sum)/Math.log(2)).toPrecision(4) +") " + "<BR/>" +
				" = " + calculateEntropy(c0, c1);
			return fm;
		}
		
		function showFormula(gi) {
			var c0, c1, s, gv, fm;		
			c0 = parseInt($('#'+gi+'-c0').val());
			c1 = parseInt($('#'+gi+'-c1').val());
			fm = printGI(c0, c1);
			$('#result').html(fm);
		}
		
		function showFormulaGI() {
			var c0, c1, s, gv, fm;		
			c0 = parseInt($('#gi0-c0').val());
			c1 = parseInt($('#gi0-c1').val());
			fm = printGI(c0, c1);
			$('#result').html(fm);
		}
		
		function showFormulaGISP() {
			var t1, t2, g1, g2, fm;	
			t1 = parseInt($('#gi1-total').val());
			t2 = parseInt($('#gi2-total').val());
			g1 = parseFloat($('#gi1-gini').val());
			g2 = parseFloat($('#gi2-gini').val());			
			fm = printGISP(t1,t2,g1,g2);
			$('#result').html(fm);
		}
		
		function showFormulaEntropy(en) {
			var c0, c1, s, gv, fm;		
			c0 = parseInt($('#'+en+'-c0').val());
			c1 = parseInt($('#'+en+'-c1').val());
			fm = printEntropy(c0, c1);
			$('#result').html(fm);
		}
		
		function reset() {
			$('#gi0-c0').val('0');
			$('#gi0-c1').val('0');
			$('#gi0-total').val('0');
			$('#gi0-gini').val('');
			$('#gi0-entropy').val('');
			
			$('#gi1-c0').val('0');
			$('#gi1-c1').val('0');
			$('#gi1-total').val('0');
			$('#gi1-gini').val('');
			$('#gi2-c0').val('0');
			$('#gi2-c1').val('0');
			$('#gi2-total').val('0');
			$('#gi2-gini').val('');			
			$('#gi-split').val('');	
		}
	</script>
</head>
<body>
<div data-role="page" id="main">

	<div data-role="header"  data-theme="g" data-fullscreen="true">
		<h1>GINI 計數機</h1>
	</div>
	<div data-role="content">	
		<ul data-role="listview" data-inset="false" data-filter="false" >
			<li><a href="#gv">Gini Index</a></li>		
			<li><a href="#gisp">Gini Split</a></li>
		</ul>		
	</div>
	<div data-role="footer" data-fullscreen="true" data-position="fixed">
	</div>
</div>
<div data-role="page" id="gv">
	<div data-role="header"  data-theme="g" data-fullscreen="true">
		<a href="#main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>	
		<h1>GINI Index</h1>
		<a href="#" data-rel="dialog" data-role="button" data-icon="refresh" data-iconpos="notext" onclick="reset()">Clear</a>
	</div>
	<div data-role="content">
		<table>
			<tr>
				<td>
					Cheat
				</td>
				<td>
					Set
				</td>
			</tr>				
			<tr>
				<td>
					Yes
				</td>
				<td>
					<input id="gi0-c0" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0" tabindex="1"/>
				</td>
			</tr>
			<tr>
				<td>
					No
				</td>	
				<td>
					<input id="gi0-c1" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0" tabindex="2" />
				</td>
			</tr>
			<tr>
				<td>
					Total
				</td>	
				<td>
					<input id="gi0-total" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td>
					GINI
				</td>	
				<td>
					<input id="gi0-gini" type="number" pattern="[0-9]*" size="4" maxlength="4" value="" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td>
					Entropy
				</td>	
				<td>
					<input id="gi0-entropy" type="number" pattern="[0-9]*" size="4" maxlength="4" value="" readonly="readonly" />
				</td>
			</tr>			
		</table>
	</div>
	<div data-role="footer" data-fullscreen="true" data-position="fixed">
		<div data-role="navbar" data-iconpos="top">
			<ul>
				<li><a href="#gv" data-icon="grid">Gini Index</a></li>				
				<li><a href="#gisp" data-icon="grid">Gini Split</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>
</div>		
<div data-role="page" id="gisp">
	<div data-role="header"  data-theme="g" data-fullscreen="true" >
		<a href="#main" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>	
		<h1>GINI Split</h1>
		<a href="#" data-rel="dialog" data-role="button" data-icon="refresh" data-iconpos="notext" onclick="reset()">Clear</a>		
	</div>
	<div data-role="content">
		<table>
			<tr>
				<td>
					Cheat
				</td>
				<td colspan="2">
					Attribute
				</td>		
			</tr>
			<tr>
				<td>
					
				</td>
				<td>
					A
				</td>	
				<td>
					B
				</td>					
			</tr>			
			<tr>
				<td>
					Yes
				</td>
				<td>
					<input id="gi1-c0" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0"  tabindex="3"/>
				</td>
				<td>
					<input id="gi2-c0" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0"  tabindex="5"/>
				</td>		
			</tr>
			<tr>
				<td>
					No
				</td>	
				<td>
					<input id="gi1-c1" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0"  tabindex="4"/>
				</td>
				<td>
					<input id="gi2-c1" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0"  tabindex="6"/>
				</td>
			</tr>
			<tr>
				<td>
					Total
				</td>
				<td>
					<input id="gi1-total" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0" readonly="readonly" />
				</td>
				<td>
					<input id="gi2-total" type="number" pattern="[0-9]*" size="4" maxlength="4" value="0" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td>
					GINI
				</td>	
				<td>
					<input id="gi1-gini" type="number" pattern="[0-9]*" size="4" maxlength="4" value="" readonly="readonly" />
				</td>
				<td>
					<input id="gi2-gini" type="number" pattern="[0-9]*" size="4" maxlength="4" value="" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td>
					GINI<sub>Split</sub>
				</td>	
				<td colspan="2">
					<input id="gi-split" type="number" pattern="[0-9]*" value="" readonly="readonly" />
				</td>
			</tr>			
		</table>
	</div>
	<div data-role="footer" data-fullscreen="true" data-position="fixed">
		<div data-role="navbar" data-iconpos="top">
			<ul>
				<li><a href="#gv" data-icon="grid">Gini Index</a></li>				
				<li><a href="#gisp" data-icon="grid">Gini Split</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>
</div>	

<div data-role="dialog" id="answer">
	<div data-role="header">
		<h1>Result</h1>
	</div>
	<div id="result" data-role="content">
	</div>
	<div data-role="footer">
	</div>
</div>
</body>
</html>